<template>
	<view class="page">
		<view class="describe">
			<text class="msg">手机快捷登录</text>
			<text class="it">手机快捷登录将自动创建平台账号</text>
		</view>
		<!-- 切换登录方式 -->
		<view class="account">
			<view class="section">
				<input class="phone" type="number" :maxlength="11" v-model="phoneNum" placeholder="请输入手机号" placeholder-class="p-active" />
				<text type="default" @tap="getCode" :class="{ isColor: disable != true }">{{ count }}{{ btnMsg }}</text>
			</view>
			<view class="section"><input class="pwd" type="number" :maxlength="6" v-model="yzm" placeholder="请输入短信验证码"
				 placeholder-class="p-active" /></view>
		</view>
		<view @tap="login" class="btn btn-gradient"><text>同意协议并登录</text></view>

		<view class="wx action sub-title" @click="wxlogin">
			<image class="icon" src="../../static/1.6.png" mode=""></image>
			<text open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="text-xl text-bold text-green">微信登录</text>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				phoneNum: '',
				yzm: '',
				password: '',
				btnMsg: '',
				disable: true,
				count: '获取验证码',
				code: 'qwe'
			};
		},

		methods: {
			login() {
				// if (!this.checkPhone(this.phoneNum)) {
				// 	uni.showToast({
				// 		title: "请输入正确的手机号码",
				// 		icon: "none"
				// 	})
				// 	return;
				// }
				// if(this.yzm != this.code){
				// 	uni.showToast({
				// 		title:"验证码不正确",
				// 		icon:"none"
				// 	})
				// 	return
				// }
				uni.showLoading({
					title: "登录中"
				})
				uniCloud.callFunction({
					name: "Login",
					data: {
						type: "phone",
						phone: this.phoneNum,
						atr: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-applets/c146dbb0-a6fb-11ea-b244-a9f5e5565f30.jpg"
					}
				}).then(res => {
					console.log(res);
					uni.setStorageSync("userPhone", {
						id: res.result,
						phone: this.phoneNum,
						name: this.phoneNum,
						atr: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-applets/c146dbb0-a6fb-11ea-b244-a9f5e5565f30.jpg"
					})
					uni.setStorageSync('islogin', true)
					uni.hideLoading()
					uni.showToast({
						title: "登录成功",
						success: () => {
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						}
					})
				})
			},
			checkPhone(phone) {
				if (!(/^1[3456789]\d{9}$/.test(phone))) {
					return false;
				} else {
					return true
				}
			},
			getCode() {
				if (!this.checkPhone(this.phoneNum)) {
					uni.showToast({
						title: "请输入正确的手机号码",
						icon: "none"
					})
					return;
				}
				uni.showLoading({
					title: "发送中"
				})
				uniCloud.callFunction({
					name: "sms",
					data: {
						phone: this.phoneNum
					},
					success: (res) => {
						console.log(res);
						if (res.success == true) {
							this.code = res.result.code
							this.btnMsg = 's重发';
							this.disable = false;
							uni.hideLoading()
							uni.showToast({
								title: "发送成功",
								icon: 'success'
							})
							const TIME_COUNT = 60;
							if (!this.timer) {
								this.count = TIME_COUNT;
								this.timer = setInterval(() => {
									if (this.count > 0 && this.count <= TIME_COUNT) {
										this.count--;
									} else {
										clearInterval(this.timer);
										this.timer = null;
										this.disable = true;
										this.count = '重新获取';
										this.btnMsg = '';
									}
								}, 1000);
							}
						} else {
							uni.showToast({
								title: "发送失败请重试"
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: "发送失败请重试"
						})
					}
				})
			},
			wxlogin() {
				let that = this;
				uni.showModal({
					title: "是否用微信登录",
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '登录中'
							})
							uni.login({
								provider: "weixin",
								success: (info) => {
									uni.getUserInfo({
										provider: "weixin",
										withCredentials: true,
										success: (res) => {
											let {
												avatarUrl,
												nickName,
												gender
											} = res.userInfo
											console.log(info, avatarUrl, nickName);
											uniCloud.callFunction({
												name: "Login",
												data: {
													type: "wx",
													code: info.code,
													atr: avatarUrl,
													name: nickName
												},
												success: (res) => {
													console.log(res);
													uni.hideLoading()
													uni.showToast({
														title: "登录成功",
														success: () => {
															uni.setStorageSync('userWx', {
																id: res.result,
																atr: avatarUrl,
																name: nickName
															})
															uni.setStorageSync('islogin', true)
															setTimeout(() => {
																uni.navigateBack()
															}, 500)
														}
													})
												},
												fail(err) {
													console.log(err);
													uni.showToast({
														title: "登录失败1请重试",
														icon: "none"
													})
												}
											})
										},
										fail: (err) => {
											uni.showToast({
												title: "登录2失败请重试",
												icon: "none"
											})
										}
									})

								},
								fail: (err) => {
									console.log(err);
								}
							})
						}
					}
				})
			}
		}

	};
</script>

<style>
	body {
		background-color: #FFFFFF;
	}

	.page {
		width: 750upx;
		flex: 1;
	}

	.describe {
		width: 750upx;
		align-items: flex-start;
		margin-top: 36upx;
		display: flex;
		flex-direction: column;
		padding: 0 48upx;
		margin-bottom: 24px;
	}

	.it {
		font-size: 28upx;
		color: #9b9b9b;
		margin-top: 12upx;
	}

	.msg {
		font-size: 40upx;
		color: #212121;
	}

	.account {
		display: flex;
		flex-direction: column;
		margin: 0 48upx 0 48upx;
	}

	.section {
		position: relative;
		width: 100%;
		height: 130upx;
		flex-direction: row;
		align-items: center;
		border-bottom-color: #dddddd;
		border-bottom-width: 1upx;
		display: flex;
		border-bottom: 1px solid #DDD;

	}

	.phone,
	.pwd {
		width: 520upx;
		height: 130upx;
		font-size: 30upx;
		color: #181818;


	}

	.btn {
		width: 656rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		border-radius: 12rpx;
		color: #ffffff;
		margin: 0 48upx;
		margin-top: 126upx;
	}

	.btn-gradient {
		ackground-image: -webkit-linear-gradient(bottom, #36d4fc, #64affb);
		background-image: linear-gradient(to top, #36d4fc, #64affb);
		color: white;
	}

	.btns {
		line-height: 50upx;
		font-size: 28upx;
		color: #888888;
		border-width: 0upx;
		background-color: rgba(0, 0, 0, 0);
		padding: 0 48upx;
	}

	.isColor {
		color: #409eff;
	}

	.wx {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 24px;
	}


	.icon {
		width: 70upx;
		height: 70upx;
		margin: 5px;
	}
</style>
